<template>
  <div>
    <TopNav :title="$route.meta.title"></TopNav>
    order
    <div class="main">
      <van-tabs @click="onClick">
        <van-tab v-for="item in tabList" :title="item.title" :key="item.title">
        </van-tab>
      </van-tabs>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.orderId">
          <div class="order_item_header" @click="toItemOrder(item.orderNo)">
            <span>订单时间：{{ item.createTime }}</span>
            <span>{{ item.orderStatusString }}</span>
            <van-card
            v-for="goods in item.newBeeMallOrderItemVOS"
            :key="goods.goodsId"
              :num="goods.goodsCount"
              :price="goods.sellingPrice"
              desc="全场包邮"
              :title="goods.goodsName"
              :thumb="goods.goodsCoverImg"
            />
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getAllOrder } from "@/api/index";
import TopNav from "@/components/topNav.vue";
export default {
  name: "Order",
  data() {
    return {
      tabList: [
        {
          title: "全部",
          content: [],
        },
        {
          title: "待付款",
          content: [],
        },
        {
          title: "待确认",
          content: [],
        },
        {
          title: "待发货",
          content: [],
        },
        {
          title: "已发货",
          content: [],
        },
        {
          title: "交易完成",
          content: [],
        },
      ],
      list:[],
      loading: false,
      finished: false,
      page: 0,
      tabPage:''
    };
  },
  methods: {
    //请求订单数据
    getOrder() {
      if (this.list) {
          this.page++
        }
      getAllOrder({
        pageNumber: this.page,
        status: this.tabPage,
      }).then((data) => {
        this.loading = false;
        this.list = [ ...this.list,...data.data.list,];
        if (data.data.list.length < 5) {
          console.log("结束了");
          this.finished = true;
        } 
      });
    },
    //点击切换不同状态的订单
    onClick(name) {
      this.list=[]//每一页起始数据为空
      this.page=0//每一页起始页数为0
      this.finished = false;
      if (name !== 0) {
        this.tabPage=name-1
        this.getOrder();
      } else {
        this.tabPage=''
        this.getOrder();
      }
    },
    onLoad() {
      this.getOrder();
    },
    toItemOrder(id){
      this.$router.push(
        {
          path:'/itemOrder',
          query:{
            id
          }
        }
      )
    }
  },
  components: { TopNav },
  };
</script>
<style scoped>
.main {
  margin-top: 0.5rem;
}
</style>